// 定义内外边距，历遍 1-80
@for $i from 0 through 80 {
  // 只要双数和能被5除尽的数
  @if $i % 2 == 0 or $i % 5 == 0 {
      // 得出：u-margin-30或者u-m-30
      .al-margin-#{$i},
      .al-m-#{$i} {
          margin: $i + px;
      }

      // 得出：u-padding-30或者u-p-30
      .al-padding-#{$i},
      .al-p-#{$i} {
          padding: $i + px;
      }
      @each $short, $long in l left, t top, r right, b bottom {
          // 缩写版，结果如： u-m-l-30
          // 定义外边距
          .al-m-#{$short}-#{$i} {
              margin-#{$long}: $i + px;
          }

          // 定义内边距
          .al-p-#{$short}-#{$i} {
              padding-#{$long}: $i + px;
          }

          // 完整版，结果如：u-margin-left-30
          // 定义外边距
          .al-margin-#{$long}-#{$i} {
              margin-#{$long}: $i + px;
          }

          // 定义内边距
          .al-padding-#{$long}-#{$i} {
              padding-#{$long}: $i + px;
          }
      }
  }
}
@for $i from 10 through 40 {
  .al-size-#{$i} {
    font-size: $i + px;
  }
}
@for $i from 14 through 40 {
  .al-line-height-#{$i} {
    line-height: $i + px;
  }
}
html, body,
.al-font {
  font-family: 'Microsoft YaHei', '微软雅黑', 'Hiragino Sans GB', 'PingFang SC', Arial, sans-serif, 'Helvetica Neue', Helvetica;
}
.al-w {
  width: 100%;
}
.al-h {
  height: 100%;
}
.al-relative {
  position: relative;
}
.al-absolute {
  position: absolute;
}
.al-flex {
  display: flex;
}
.al-flex-1 {
  flex: 1;
}
.al-flex-column {
  flex-direction: column;
}
.al-end {
  text-align: right;
}
.al-start {
  text-align: left;
}
.al-center {
  text-align: center;
}
.al-flex-end {
  justify-content: flex-end;
}
.al-space-between {
  justify-content: space-between;
}
.al-space-around {
  justify-content: space-around;
}
.al-space-evenly {
  justify-content: space-evenly;
}
.al-flex-center,
.al-align-items {
  align-items: center;
}
.al-flex-end {
  align-items: flex-end;
}

// 文字渐变
.textGradient-0 {
  background: linear-gradient(55deg, #f7d336 25%, #52ce63);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.textGradient-1 {
  background: linear-gradient(55deg,#42d392 15%,#647eff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.textGradient-2 {
  background: linear-gradient(55deg, #229cc5 15%, #bd34fe);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.textGradient-3 {
  background: linear-gradient(55deg, #b464ff 15%, #d3427e);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.gradient-0 {
  background: linear-gradient(55deg, #f7d336 25%, #52ce63);
}
.gradient-1 {
  background: linear-gradient(55deg,#42d392 15%,#647eff);
}
.gradient-2 {
  background: linear-gradient(55deg, #229cc5 15%, #bd34fe);
}
.gradient-3 {
  background: linear-gradient(55deg, #b464ff 15%, #d3427e);
}

.al-divider {
  height: 8px;
  width: 100%;
  background: linear-gradient(55deg, #f7d336 25%, #52ce63);
  opacity: 0.2;
}